<template>
	<view>
		<!-- 一周的日历盒子 -->
		<div class="week_box">
			<div @click="selected(item,index)" v-for="(item,index) in weekList" :key="index"
				:class="['item',activateIndex== index ? 'activate':'']">
				<div>{{item.week}}</div>
				<div>{{item.sun}}</div>
			</div>
		</div>

		<!-- 预约医生信息列表 -->
		<div class="info_show">
			<div class="item" v-for="(item,index) in doctorSchedulingList" :key="index">
				<!-- 左边 -->
				<div class="doctorInfo">

					<image :src="item?.avatar" mode=""></image>
					<div class="info">
						{{item.employee.name}}
					</div>
				</div>
				<!-- 右边 -->
				<div class="scheduling">
					<div class="box">
						<span>上午</span>
						<div @click="changeReservation(item.scheduling.morning,item,'morning')"
							:class="['be_on_duty',item.scheduling.morning == 1?'':'already']">
							{{item.scheduling.morning == 1?"预约":"不可预约"}}
						</div>
					</div>
					<div class="box">
						<span>下午</span>
						<div @click="changeReservation(item.scheduling.afternoon,item,'afternoon')"
							:class="['be_on_duty',item.scheduling.afternoon == 1?'':'already']">
							{{item.scheduling.afternoon == 1?"预约":"不可预约"}}
						</div>
					</div>
				</div>
			</div>

		</div>
	</view>
</template>

<script setup>
	import {
		apiAdd
	} from "@/api/reservation.js"
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		apiGetList
	} from "@/api/scheduling.js"
	const sunDay = [
		"周一", "周二", "周三", "周四", "周五", "周六", "周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"
	]
	//用户信息
	const userInfo = ref({})
	const activateIndex = ref(0)
	//后端返回的排班数据
	const schedulingList = ref([])

	//挂号信息
	const reservationInfo = ref({
		reservationId: null,
		userId: null,
		doctorId: null,
		//预约时间
		appointmentTime: "",
		//预约日期
		appointmentDate: "",
		//预约状态
		status: ""
	})

	//对应日期展示的医生排班列表
	const doctorSchedulingList = ref([])



	const weekList = ref([{
		week: "",
		sun: ""
	}, {
		week: "",
		sun: ""
	}, {
		week: "",
		sun: ""
	}, {
		week: "",
		sun: ""
	}, {
		week: "",
		sun: ""
	}, {
		week: "",
		sun: ""
	}, {
		week: "",
		sun: ""
	}])

	//
	const selected = (item, index) => {
		let weekItem = handlerWeekDate(item.week)
		handleRegisterData(weekItem)
		activateIndex.value = index
	}


	//日期返回数据
	const handlerData = (week) => {
		switch (week) {
			case "星期一":
				return "周一";
			case "星期二":
				return "周二";
			case "星期三":
				return "周四";
			case "星期四":
				return "周四";
			case "星期五":
				return "周五";
			case "星期六":
				return "周六";
			case "星期日":
				return "周日"
			default:
				break;
		}
	}

	//日期返回数据
	const handlerWeekDate = (week) => {
		switch (week) {
			case "周一":
				return "monday";
			case "周二":
				return "tuesday";
			case "周三":
				return "wednesday";
			case "周四":
				return "thursday";
			case "周五":
				return "friday";
			case "周六":
				return "saturday";
			case "周日":
				return "sunday"
			default:
				break;
		}
	}

	const getTodayMidnight = () => {
		// 创建一个新的Date对象，表示当前日期和时间
		let now = new Date();
		// 将时间部分设置为0点（午夜12点）
		now.setHours(0, 0, 0, 0); // 年、月、日不变，小时、分钟、秒、毫秒都设置为0
		return now.getTime();
	}

	//预约
	const changeReservation = async (value, item, type) => {
		if (value != 1) {
			return uni.showToast({
				title: "此医生不可预约挂号",
				icon: "none"
			})
		}

		//判断预约的时间是否超过今天的上班时间
		if (activateIndex.value == 0) {
			//现在的时间
			let nowTime = new Date().getTime()
			//当天整点的时间
			let todayTime = getTodayMidnight()
			if (type == "morning") {
				//上午下班的时间
				let mornigTime = todayTime + 43200000
				if (nowTime >= mornigTime) {
					return uni.showToast({
						title: "超过医生上班的时间",
						icon: "none"
					})
				}
			} else {
				//下午下班的时间
				let afternoonTime = todayTime + 64800000
				if (nowTime >= afternoonTime) {
					return uni.showToast({
						title: "超过医生上班的时间",
						icon: "none"
					})
				}
			}
		}

		let dateArray = new Date().toLocaleDateString().split("/")
		dateArray[1] = dateArray[1] < 10 ? "0" + dateArray[1] : dateArray[1]
		let day = weekList.value[activateIndex.value].sun
		reservationInfo.value.userId = userInfo.value.empId
		reservationInfo.value.doctorId = item.employee.empId
		reservationInfo.value.appointmentDate = dateArray[0] + '-' + dateArray[1] + '-' + day
		reservationInfo.value.appointmentTime = type
		await apiAdd(reservationInfo.value)
		uni.showToast({
			title: '预约成功',
			icon: "success",
			duration: 600
		});
		setTimeout(() => {
			uni.navigateBack()
		}, 600)
	}

	//对预约排班数据展示
	const handleRegisterData = (week) => {
		//对排班数据进行重构
		doctorSchedulingList.value = schedulingList.value.map((ele) => {
			return {
				avatar: ele.employee.avatar,
				employee: ele.employee,
				scheduling: JSON.parse(ele.scheduling[week])
			}
		})

	}


	//获取某个社区的排班
	const getList = async () => {
		let result = await uni.getStorage({
			key: "empleyeeInfo"
		})
		let res = await apiGetList(result.data.communityId)
		schedulingList.value = res.data
		let weekItem = handlerWeekDate(weekList.value[0].week)
		handleRegisterData(weekItem)
	}

	//
	const getDate = () => {
		weekList.value = []
		// 获取当前日期
		const today = new Date();

		// 遍历未来七天
		for (let i = 0; i < 7; i++) {
			// 克隆当前日期对象以避免修改原始对象
			const futureDate = new Date(today);
			// 增加天数
			futureDate.setDate(today.getDate() + i);

			// 获取星期几（0代表星期日，1代表星期一，依此类推）
			const dayOfWeek = futureDate.toLocaleDateString('zh-CN', {
				weekday: 'long'
			});

			weekList.value.push({
				sun: futureDate.toLocaleDateString('zh-CN', {
					day: '2-digit'
				}).slice(0, -1),
				week: handlerData(dayOfWeek)
			});
		}
	}

	onMounted(async () => {
		getDate()
		getList()
		let res = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = res.data


	})
</script>

<style scoped lang="scss">
	image {
		object-fit: cover !important;
	}

	.info_show {
		width: 100vw;
		box-sizing: border-box;
		padding: 0 40rpx;
		padding-bottom: 40rpx;

		.item {
			display: flex;
			margin-top: 40rpx;
			width: 100%;
			height: 420rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: inset 20rpx 20rpx 16px 0px rgba(209, 209, 209, 0.8);

			//左边
			.doctorInfo {
				width: 40%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 20rpx;

				image {
					width: 200rpx;
					height: 250rpx;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
				}
			}

			//右边
			.scheduling {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.box {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.already {
						background-color: #ff5558 !important;
					}

					.be_on_duty {
						margin: 20rpx 0;
						width: 200rpx;
						height: 100rpx;
						background-color: #f5b017;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						border-radius: 20rpx;
						font-size: 42rpx
					}

					label {
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.week_box {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		justify-content: center;
		align-items: center;
		background-color: #f5b017;
		padding: 10rpx;
		box-sizing: border-box;

		.activate {
			color: #f5b017 !important;
			background-color: #fff;
			border-radius: 10rpx;

		}

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			color: #fff;
			margin: 0 10rpx;

			view:nth-child(1) {
				margin-bottom: 10rpx;
			}
		}
	}
</style>
